<template>
	<div>
		<!-- 导航栏 -->
		<van-nav-bar>
			<template #title>
				<input type="text" style="border: 0;background-color: #d2d2d2;">
			</template>
			<template #left>
				<van-icon name="arrow-left" style="color: black;font-size: 23px;" />
			</template>
			<template #right>
				<van-icon name="chat-o" style="color: black;font-size: 23px;" />
			</template>
		</van-nav-bar>

		<!-- 排序栏 -->
		<van-tabs v-model="active">
			<van-tab title="区域">区域</van-tab>
			<van-tab title="售价">售价</van-tab>
			<van-tab title="房型">房型</van-tab>
			<van-tab title="更多">更多</van-tab>
		</van-tabs>

		<!-- 商品卡片card -->
		<van-card v-for="(item,index) in list" :key="index" :title="item.title" :thumb="item.img" />
		</van-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				list: []
			}
		},
		mounted() {
			this.$axios.get("/house.json").then(res => {
				console.log(res.data)
				this.list = res.data.data
			})
		},
		computed: {
			searchList() {
				var newarr = this.list.filter((item) => {
					if (item.title.indexOf(this.keywords) != -1) {
						return item;
					}
				});
				return newarr;
			},
		}
	}
</script>

<style scoped>
	.van-tab__pane {
		display: none;
	}
</style>
